<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      *{
          margin: 0 auto;
          background-color: #ccdcfb;
      }
      h1{
          width: 100%;
          text-align: center;
      }
      h2{
          width: 100%;
          text-align: center;
        font-size: 20px;
        margin-top: 20px;
      }
      .box1{
          width: 300px;
          height: 400px;
        background-color: white;
        border-radius: 10px;
        margin-left: 100px;
        float: left;
        margin-top: 20px;

      }
      .box2{
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;
        margin-left: 100px;
         float: left;
         margin-top: 20px;

      }
      .box3{
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;
        margin-left: 100px;
        float: left;
         margin-top: 20px;

      }
      .box4{
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;
        margin-left: 100px;
         float: left;
         margin-top: 20px;

      }
      .img1{
          width: 150px;
        height: 200px;
        background-repeat: no-repeat;
        background-color: chartreuse;
        background-size: cover;
        text-align: center;
        background-image: url("./img/shouji.png");
      }
      .img2{
          width: 150px;
          height: 200px;
          background-repeat: no-repeat;
          background-color: chartreuse;
          background-size: cover;
          text-align: center;
          background-image: url("./img/shouji.png");
      }
      .img3{
          width: 150px;
          height: 200px;
          background-repeat: no-repeat;
          background-color: chartreuse;
          background-size: cover;
          text-align: center;
          background-image: url("./img/shouji.png");
      }
      .img4{
          width: 150px;
          height: 200px;
          background-repeat: no-repeat;
          background-color: chartreuse;
          background-size: cover;
          text-align: center;
          background-image: url("./img/shouji.png");
      }
    p{
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
       text-indent: 10px;
      background-color: white;
      }
    .p1{
        font-size: 25px;
        color: red;
        font-weight: bold;
        margin-top: 10px;
      }
    button{
        width: 200px;
        height: 50px;
        background-color: #56b1e8;
        color: white;
        border-radius: 10px;
      text-align: center;
      display: block;
      margin:20px auto;
        /*margin-left: 50px;
        margin-top: 10px;*/
      }
.row1{
      overflow: hidden;
}
   </style>
</head>
<body>
<h1>热销商品</h1>
<h2>精选优质商品，限时优惠中</h2>
<div class="row1">
<div class="box1"><div class="img1"></div><p>旗舰智能⼿机</p><p class="p1">￥3999</p><button>立即购买</button></div>
<div class="box2"><div class="img2"></div><p>旗舰智能⼿机</p><p class="p1">￥3999</p><button>立即购买</button></div>
</div>
<div class="box3"><div class="img3"></div><p>旗舰智能⼿机</p><p class="p1">￥3999</p><button>立即购买</button></div>
<div class="box4"><div class="img4"></div><p>旗舰智能⼿机</p><p class="p1">￥3999</p><button>立即购买</button></div>

<!--¥3999
⽴即购买
⽆线蓝⽛⽿机
¥699
⽴即购买
效果图:
智能运动⼿表
¥1299
⽴即购买
⾼性能平板电脑
¥2599
⽴即购买</p></div>-->
</body>
</html>